* {
    -webkit-tap-highlight-color: transparent; /* Entfernt den blauen Tap-Effekt auf mobilen Geräten */
}


  .sec-center {
    z-index: 9999999;
    display: flex;
    justify-content: center;
    align-items: center;
    padding-top: 0px;
    flex-direction: column; /* Ändert die Richtung auf vertikal */
  }
  
  .dropdown,
  .dropdown-sub {
    z-index: 9999999;
    display: none;
  }
  
  /* Leuchtendes Blau für den Button */
  .for-dropdown,
  .for-dropdown-sub {
    z-index: 9999999;
    display: inline-block;
    padding: 15px 20px;
    background-color: #e84c43;
    color: #ffffff; /* Gräuliche Schrift */
    font-weight: 600;
    border-radius: 5px;
    cursor: pointer;
    transition: background-color 0.3s ease, box-shadow 0.3s ease;
    width: 50%; /* Breite des Dropdown-Buttons */
    text-align: center;
    box-shadow: 0 0 10px #e84c43; /* Leuchtender Effekt */
    position: relative; /* Position für den Pfeil */
  }
  
  /* Hover-Effekt für das leuchtende Blau */
  .for-dropdown:hover,
  .for-dropdown-sub:hover {
    z-index: 9999999;
    background-color: #e84b43cc;
    box-shadow: 0 0 20px #e84b438a; /* Intensivierter Leuchteffekt */
  }
  
  /* Pfeil hinzufügen */
  .for-dropdown::after,
  .for-dropdown-sub::after {
    z-index: 9999999;
    content: '';
    border: solid #cfcfcf; /* Farbe des Pfeils (gräulich) */
    border-width: 0 1.5px 1.5px 0;
    display: inline-block;
    padding: 4px;
    position: absolute;
    right: 20px; /* Pfeil rechts neben dem Text */
    top: 45%;
    transform: translateY(-50%) rotate(45deg); /* Pfeil nach unten zeigend */
    transition: transform 0.3s ease; /* Animation der Rotation */
  }
  
  /* Wenn das Dropdown geöffnet ist, dreht sich der Pfeil */
  .dropdown:checked + .for-dropdown::after {
    transform: translateY(-20%) rotate(-135deg); /* Pfeil nach oben zeigend */
  }
  
  .for-dropdown i,
  .for-dropdown-sub i {
    z-index: 9999999;
    margin-left: 10px;
    transition: transform 0.3s ease;
  }
  
  /* Dropdown öffnet und schließt */
  .dropdown:checked + .for-dropdown i {
    transform: rotate(180deg);
  }
  
  .dropdown:checked ~ .section-dropdown {
    max-height: 500px;
    opacity: 1;
    pointer-events: all;
  }
  
  .dropdown-sub:checked + .for-dropdown-sub i {
    transform: rotate(135deg);
  }
  
  .dropdown-sub:checked ~ .section-dropdown-sub {
    max-height: 300px;
    opacity: 1;
    pointer-events: all;
  }
  
  /* Die Dropdown Sektionen */
  .section-dropdown,
  .section-dropdown-sub {
    z-index: 9999999;
    max-height: 0;
    opacity: 0;
    overflow: hidden;
    transition: max-height 1s ease, opacity 1s ease;
    background-color: #222; /* Dunkler Hintergrund für Kontrast */
    padding: 0;
    margin-top: 5px;
    border-radius: 5px;
    width: 200px; /* Breite des Dropdowns anpassen */
  }
  
  .section-dropdown a,
  .section-dropdown-sub a {
    display: block;
    padding: 10px 15px;
    color: #ffffff; /* Gräuliche Schrift */
    text-decoration: none;
    transition: background-color 0.3s ease, color 0.3s ease;
    text-align: left;
  }
  
  /* Hover-Effekt für die Links */
  .section-dropdown a:hover,
  .section-dropdown-sub a:hover {
    background-color: #ddd;
    color: #000;
  }
  
  /* Responsivität für kleine Bildschirme */
  @media (max-width: 768px) {
    .for-dropdown,
    .for-dropdown-sub {
      width: 50%;
      text-align: center;
      padding: 10px;
    }
    
    .section-dropdown,
    .section-dropdown-sub {
      width: 60%;
    }
  
    .section-dropdown a,
    .section-dropdown-sub a {
      padding: 15px;
    }
  }
  
  /* Verstecke das Dropdown-Menü standardmäßig */
  .test {
    opacity: 0;
    visibility: hidden;
    max-height: 0;
    transition: opacity 1s ease-in-out, max-height 1s ease-in-out;
    overflow: hidden; /* Verhindert, dass der Inhalt beim Animieren sichtbar ist */
  }
  
  /* Zeige das Dropdown-Menü nur an, wenn die Klasse 'show' hinzugefügt wird */
  @media (max-width: 530px) {
    .test.show {
      opacity: 1;
      visibility: visible;
      max-height: 500px; /* Definiere eine passende max-height für den expandierenden Effekt */
      transition: opacity 2s ease-in-out, max-height 2s ease-in-out;
      margin-bottom: 100px;
    }
  }